<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .oul {
            display: flex;
            text-align: center;
            line-height: 46px;
        }

        

        .box {
            text-align: center;
            line-height: 200px;
            font-size: 26px;
        }

        .active {
            background: orange;
            color: #fff;
        }

        .vertical {
            display: flex;
            text-align: center;
        }

        .vertical > .oul {
            display: flex;
            flex-direction: column;
        }

        .vertical > .oul > li {
            flex: 1;
        }

        .vertical > .box {
            flex: 1;
            text-align: center;
            line-height: 200px;
            font-size: 26px;
        }

        .horizontal {
            display: flex;
            flex-direction: column;
            text-align: center;
        }

        .horizontal > .oul {
            display: flex;
            line-height: 46px;
        }

        .horizontal > .oul > li {
            flex: 1;
        }

        </style>
</head>
<body>
    
    <div id="app">
        <my-tab type="vertical"></my-tab>
        <my-tab type="horizontal"></my-tab>
    </div>

    <template id="tab">
        <div :class="type">
            <ul class="oul">
                <li v-for="(item, index) in list"
                    :class="index === count? 'active': ''"
                    @click="changeCount(index)"
                >
                    {{ item }}
                </li>
            </ul>
            <div class="box">
                {{ list[count] }}
            </div>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>

        const Tab = {
            template: "#tab",
            props: {
                type: {
                    type: String,
                    // default: "",
                    // required: true
                }
            },
            data() {
                return {
                    count: 0,
                    list: ["语文", "数学", "英语"]
                }
            },
            methods: {
                changeCount(index) {
                    this.count = index
                }
            }
        }

        new Vue({
            // 元素
            el: "#app",
            components: {
                "my-tab": Tab
            }
        })
    </script>
</body>
</html>